<template>
	<view class="backgroundContent">
		<!-- <cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">通告</block>
		</cu-custom> -->
		<!-- 搜索 -->
		<view class="search">
			<u-search placeholder="日照香炉生紫烟" v-model="keyword" bgColor="#ffffff"></u-search>
		</view>
		<view class="titleSelect">
			<!-- 地区 -->
			<view class="item">
				<picker @change="bindPickerChange" :value="addressIndex" mode="region">
					<view class="uni-input">
						{{addressIndex.length != 0 ? addressIndex[0] + ',' + addressIndex[1] + ',' + addressIndex[2] : '地区' }}
					</view>
				</picker>
			</view>
			<!-- 类型 -->
			<view class="item">
				<picker @change="bindPickerChangeType" :value="typeIndex" :range="list" range-key="title">
					<view class="uni-input">{{typeTitle == ''? '类型':list[typeIndex].title}}</view>
				</picker>
			</view>
			<!-- 年龄 -->
			<!-- <view class="item" @tap="show = true">
				{{ageValue == ''?'年龄':ageValue + '岁'}}
			</view> -->
			<!-- 价格 -->
			<view class="item">
				<picker @change="bindPickerChangePrice" :value="priceIndex" :range="priceList" range-key="value">
					<view class="uni-input">
						{{priceIndex != 0?  price : '价格' }}
					</view>
				</picker>
			</view>
		</view>
		<!-- <u-popup :show="show" mode="bottom" @close="close" @open="open">
			<view>
				{{ageValue}}
				<u-slider v-model="ageValue" min="10" max="80"></u-slider>
			</view>
		</u-popup> -->
		<view class="contentText">
			<view class="item" v-for="(item,index) in tonggaoList" :key="index"
				@tap.stop="navTo('/bbs/IssueNotice/details?id=' + item._id)">
				<view class="first">
					<view class="title">{{item.title}}【{{typeName(item.type)}}】</view>
					<view class="money">{{item.money}}</view>
				</view>
				<view class="second">
					<view class="address">
						<image class="image" src="../../static/dongtai/address.png" mode=""></image>
						<view class="">
							{{item.address[1]}}
						</view>
					</view>
					<view class="date">
						<image class="image" src="../../static/dongtai/clock.png" mode=""></image>
						<view class="">
							{{item.time}}
						</view>
					</view>
					<!-- <view class="date">{{'1小时前'}}更新</view> -->
				</view>
				<view class="user" v-if="item.showPhone">
					<view class="userName">
						<!-- <image class="image" src="../../static/dongtai/address.png" mode=""></image> -->
						<view>联系人：{{item.userName || '用户名'}}<text
								style="margin-left: 20upx;">联系方式：{{item.userPhone}}</text></view>
					</view>
					<view class="userInfo" @tap.stop="navTo('/bbs/topic/his?id=' + item.userid)">查看发布人资料</view>
				</view>
			</view>
		</view>
		<view type="" class="fixedTopBottom" @tap.stop="navTo('/bbs/IssueNotice/IssueNotice')">
			<view class="" style="font-size: 65upx;">
				+
			</view>
			<view class="">
				发布通告
			</view>
		</view>
	</view>
</template>

<script>
	import list from '../../common/new.js'
	export default {
		data() {
			return {
				addressIndex: [],
				list: list,
				typeTitle: '',
				typeIndex: 0,
				show: false,
				ageValue: '',
				priceIndex: 0,
				price: '',
				priceList: [{
					money: '0-500',
					value: '0-500',
				}, {
					money: '501-1000',
					value: '501-1000',
				}, {
					money: '1001-2000',
					value: '1001-2000',
				}, {
					money: '2001-5000',
					value: '2001-5000',
				}],
				tonggaoList: [],
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			typeName(item) {
				if (item) {
					return this.list[item].title
				}
			},
			init() {
				var that = this
				uniCloud.callFunction({
					name: 'announcement',
					data: {
						cloudAction: "list",
						params: {
							start: 0,
							limit: 10,
							address: this.addressIndex,
							type: this.typeIndex,
							money: this.priceIndex
						}
					}
				}).then((res) => {
					if (res.result.error == 0) {
						that.tonggaoList = res.result.data.list
					} else {
						uni.showToast({
							title: res.result.message,
							icon: "none",
						})
						if (res.result.code == 30203) {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/login/index'
								})
							}, 800)
						}
					}
				}).catch((err) => {
					console.error(err)
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.addressIndex = e.target.value
			},
			bindPickerChangeType(e) {
				this.typeTitle = this.list[e.target.value]
				this.typeIndex = e.target.value
			},
			bindPickerChangePrice(e) {
				this.priceIndex = e.target.value
				this.price = this.priceList[e.target.value].money
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.backgroundContent {
		height: 100vh;
		// margin: 20upx;
		width: 100vw;
		background: #F2F2F2;
	}

	.search {
		margin: 20upx;
	}

	.titleSelect {
		margin: 20upx;
		display: flex;
		align-items: center;

		.item {
			text-align: center;
			width: 25%;
		}
	}

	.contentText {
		background-color: #F4F4F4;


		.item {
			margin: 20upx 0;
			padding: 20upx;
			background-color: #FFFFFF;

			.first {
				display: flex;
				justify-content: space-between;
				font-size: 34upx;
				align-items: center;

				.money {
					color: #0FC4FF;
				}
			}

			.second {
				display: flex;
				align-items: center;
				border-bottom: 2upx solid #d4d4d4;
				margin: 20upx 0;
				padding: 20upx 0;

				.address,
				.date {
					display: flex;
					align-items: center;

					.image {
						margin: 0 10upx;
						height: 50upx;
						width: 50upx;
					}
				}
			}

			.user {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.userName {
					display: flex;
					align-items: center;

					.image {
						border-radius: 50upx;
						height: 80upx;
						width: 80upx;
					}
				}
			}
		}
	}

	.fixedTopBottom {
		position: fixed;
		width: 150rpx;
		height: 150rpx;
		right: 30rpx;
		bottom: 30rpx;
		background: #fff;
		box-shadow: 0px 0px 7px 3px #f0f0f0;
		border-radius: 50%;
		z-index: 9;
		text-align: center;
		font-size: 26upx;
		padding-left: 0;
		padding-right: 0;
		line-height: 1.3;
	}
</style>
